<template>

    <!-- 两个盒子 一个在最左边 一个在最右边 -->
     
    <div class="header">
    
        <div class="header-left">
    
            <img src="../assets/img/logo.png" 
            width="300" class="bc">
    
        </div>
        <div class="header-right">
    
        <span style="margin-right: 10px;">{{ username }}</span>
        <el-dropdown @command="handleCommand">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
        <!-- <span class="el-dropdown-link">
          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span> -->
        <template #dropdown>
            <el-dropdown-menu>
                        <el-dropdown-item command="a">个人信息</el-dropdown-item>
                        <el-dropdown-item command="b">退出登录</el-dropdown-item>
    
            </el-dropdown-menu>
        </template>
      </el-dropdown>
    
    <!-- 
            <el-dropdown>
    
                <template #dropdown>
    
                </template>
            </el-dropdown> -->
            
        </div>  
    </div>
    
    </template>
    
    <script setup>
        import { useRouter } from 'vue-router';

    const router = useRouter();
     //sessionStorage的username拿出来
     const username = sessionStorage.getItem('username')
     const type = sessionStorage.getItem('type')
    console.log(username,type)

    const handleCommand = (command) => {
    if (command === 'a') {
        // 处理个人信息逻辑
        console.log('个人信息');
    } else if (command === 'b') {
        // 处理退出登录逻辑
        sessionStorage.removeItem('username');
        sessionStorage.removeItem('type');
        router.push('/login');
    }
};
    </script>
    
    <style scoped>
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        height: 80px; 
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    }
    
    .header-left {
        display: flex;
        align-items: center;
    }
    
    .header-right {
        display: flex;
        align-items: center;
        
        margin-right: 10px;
    }
    
    .bc {
        margin-left: 8px;
    }
    </style>